<template>
  <div class="box">
    <header class="row header">
      <div class="row logo">
        <img src="@/assets/home_icon_logo.png">
      </div>
    </header>
    <div class="col-sm-4 middle col-center-block">
      <div class="row micro">
        <p>绑定微信</p>
      </div>
      <div class="m-top">
        <p class="basic">基本信息</p>
        <div class="form-group">
          <label>*&nbsp;</label>
          <el-input
            v-model="formData.phonenumber"
            name="phonenumber"
            class="col-11 contol"
            placeholder="请输入手机号码"
          >
            <i slot="suffix" class="el-input__icon icon-yonghu icon iconfont"></i>
          </el-input>
          <el-collapse-transition>
            <div class="tishi" v-show="show1">
              <div>
                <i class="icon iconfont left-bise" :class="ichange('err1')"></i>&nbsp;
                <span v-text="errs.tel"></span>
              </div>
            </div>
          </el-collapse-transition>
        </div>
        <div class="form-group">
          <label>*&nbsp;</label>
          <el-input
            v-model="formData.password"
            name="password"
            class="col-11 contol"
            id="pass1"
            placeholder="请输入密码"
            autocomplete="off"
          >
            <i
              v-on:click=" mousedown1(1)"
              v-on:mouseup="mouseup1(1)"
              class="icon iconfont icon-bukejian el-input__icon chead"
              slot="suffix"
            ></i>
          </el-input>
          <el-collapse-transition>
            <div class="tishi" v-show="show2">
              <div>
                <i class="icon iconfont left-bise" :class="ichange('err2')"></i> &nbsp;不能包含空格
              </div>
              <div>
                <i class="icon iconfont left-bise" :class="ichange('err3')"></i>
                &nbsp;长度为6-16个字符
              </div>
              <!-- <div>
                <i class="icon iconfont" :class="ichange('err4')"></i>
              &nbsp;必须包含字母和数字
              </div> -->
            </div>
          </el-collapse-transition>
        </div>
        <div class="row form-group verify">
          <el-input
            v-model="formData.yzm"
            class="col-sm-8 col-md-6 col-lg-4 note"
            placeholder="请输入验证码"
            autocomplete="off"
            style="margin-top:18px;"
          ></el-input>
          <button
            type="button"
            v-if="isTel"
            class="col-6 btn btn-block btn-size control"
            @click="findcode()"
            style="margin-left:80px;cursor:pointer;"
          >获取验证码</button>
          <button
            class="col-6 btn btn-block btn-size"
            style="margin:20px 0 0 80px;"
            type="button"
            v-else
            v-text="times()"
            disabled
          ></button>
          <!--<el-collapse-transition><p class="send-yz" v-show="ma" >点击获取验证码，短信将发送至安全手机*******<span>{{ma}}</span></p></el-collapse-transition> -->
        </div>
        <button type="button" class="col-11 btn btn-block bang" @click="soonbind()">立即绑定</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  asyncfind_getCode,
  bindwechat,
  asyncfind_checkCode
} from "../../plugins/api.js";
import $ from "jquery";

function propclick() {
  $("#pass1").prop("type", "password");
}
export default {
  name: "resetpassword",
  beforeMount() {
    document.addEventListener("mouseup", propclick, false);
  },
  beforeDestroy() {
    document.removeEventListener("mouseup", propclick, false);
  },
  data() {
    return {
      formData: {
        phonenumber: "",
        password: "",
        openid: "",
        yzm: ""
      },
      isTel: false,
      isUser: false,
      ruleForm: {
        aleph: "0086",
        phonenumber: "",
        password: "",
        password2: ""
      },
      yzm: "",
      show1: false,
      show2: false,
      show3: false,
      show5: false,
      qh: [
        {
          aleph: "zg",
          continent: 0,
          id: "0086",
          length: 11,
          pinyin: "zhongguo",
          value: "中国 0086"
        },
        {
          aleph: "zgtw",
          continent: 0,
          id: "0886",
          length: 9,
          pinyin: "zhongguotaiwan",
          value: "中国台湾 0886"
        }
      ],
      iserr: {
        err1: true,
        err2: false,
        err3: false,
        err4:false,
        err5: false
      },
      errs: {
        tel: "手机号不能为空"
      },
      ma: false,
      shou: false,
      a1: true,
      a2: false,
      a3: false,
      time: 60,
      timer: Object
    };
  },
  created() {
    this.GetQueryString("openid");
  },
  watch: {
    "formData.phonenumber"(v) {
      if (v) {
        this.jiance(1);
      } else {
        this.isTel = false;
      }
    },
    "formData.password"() {
      this.jiance(2);
      this.jiance(3);
    },
    time(v) {
      if (v == 60) {
        this.isTel = true;
      } else {
        this.isTel = false;
      }
    },
    "iserr.err1": function(v) {
      this.show1 = !v;
      if (v) {
        this.errs.tel = "ok";
        this.isTel = true;
      } else {
        this.isTel = false;
      }
    },
    "iserr.err2": function(v) {
      this.show2 = !(v && this.iserr.err3); //&& this.iserr.err4
    },
    "iserr.err3": function(v) {
      this.show2 = !(v && this.iserr.err2);
    },
    "iserr.err4": function(v) {
      this.show2 = !(v && this.iserr.err3 && this.iserr.err2);
    },
    "iserr.err5": function() {
      this.show3 = !this.iserr.err5;
    }
  },
  methods: {
    ichange: function(i) {
      if (this.iserr[i]) {
        return "icon-zhengque text-success";
      } else {
        return "icon-cuowu text-danger";
      }
    },
    jiance(i) {
      if (i === 1) {
        this.iserr.err1 = jianphone(this.formData.phonenumber);
        if (this.iserr.err1 == false) {
          this.errs.tel = "手机格式不正确";
        } else {
          this.isTel = true;
        }
      }
      if (i === 2) {
        this.iserr.err2 = jiankongge(this.formData.password);
        if (
          this.formData.password.length >= 6 &&
          this.formData.password.length <= 16
        ) {
          this.iserr.err3 = true;
        } else {
          this.iserr.err3 = false;
        }
        this.iserr.err4 = jianliangzhong(this.formData.password);
      }
      if (i === 3) {
        if (
          this.formData.password !== "" &&
          this.formData.yzm !== "" &&
          this.formData.phonenumber !== ""
        ) {
          this.iserr.err5 = true;
        } else {
          this.iserr.err5 = false;
        }
        this.show3 = !this.iserr.err5;
      }
      function jiankongge(data) {
        var reg = new RegExp(/^\s*(\S+)\s*$/);
        if (reg.test(data)) {
          return true;
        } else {
          return false;
        }
      }
      function jianliangzhong(data) {
        var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
        if (reg.test(data)) {
          return true;
        } else {
          return false;
        }
      }
      function jianphone(data) {
        var reg = new RegExp(/^1[3456789]\d{9}$/);
        if (reg.test(data)) {
          return true;
        } else {
          return false;
        }
      }
    },
    async findcode() {
      try {
        await asyncfind_getCode({ phonenumber: this.formData.phonenumber });
        var a = this.hc;
        this.timer = setInterval(a, 1000);
        this.isUser = true;
      } catch (err) {
        this.iserr.err1 = false;
        this.errs.tel = err;
      }
      this.ma = this.formData.phonenumber.substring(
        7,
        this.formData.phonenumber
      );
      this.shou = this.formData.phonenumber.substring(0, 3);
    },
    times() {
      if (this.time == 60) {
        return "获取验证码";
      } else {
        return `${this.time} s`;
      }
    },
    hc() {
      var a = this.time;
      this.time--;
      if (a == 0) {
        clearInterval(this.timer);
        this.time = 60;
      }
    },
    teladd() {},
    async next1() {
      if (this.yzm) {
        try {
          await asyncfind_checkCode({ yzm: this.yzm });
          this.a1 = false;
          this.a2 = true;
        } catch (err) {
          this.show5 = true;
        }
      } else {
        this.$alert("验证码不能为空");
      }
    },
    async next2() {
      for (var err in this.iserr) {
        if (this.iserr[err] == false) {
          this.$alert("信息不完整");
          return false;
        }
      }
    },
    mousedown1: function(i) {
      if (i === 1) {
        $("#pass1").prop("type", "text");
      }
    },
    mouseup1: function(i) {
      if (i === 1) {
        $("#pass1").prop("type", "password");
      }
    },
    setting() {
      if (this.a1 === true) {
        return "a1-box";
      } else if (this.a2 === true) {
        return "a2-box";
      } else {
        return "all-box";
      }
    },
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      var context = "";
      if (r != null) context = r[2];
      reg = null;
      r = null;
      this.formData.openid =
        context == null || context == "" || context == "undefined"
          ? ""
          : context;
    },
    soonbind() {
      bindwechat(this.formData)
        .then(() => {
          this.$router.push({name: "login"});
          // this.$router.push('/myclass');
        })
        .catch(() => {
          alert("信息不完整，请认真填写!");
        });
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.form-group {
  margin-top: 20px;
}
.header {
  margin: 0px;
  height: 75px;
  background-color: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
.logo {
  width: 116px;
  height: 40px;
  margin: auto;
}
.middle {
  margin-top: 135px;
  height: 399px;
}
.col-center-block {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.micro {
  height: 23px;
  border-bottom: 1px solid #e8e8e8;
}
.micro p {
  width: 200px;
  margin: auto;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-size: 26px;
  color: #5d5c5c;
  background-color: #fff;
}
.m-top {
  margin-top: 72px;
  margin-left: 25px;
}
.basic {
  width: 80px;
  height: 17px;
  font-family: MicrosoftYaHei;
  font-size: 16px;
  letter-spacing: 1px;
  color: #565656;
}
.control {
  height: 37px;
  font-size: 12px;
  font-family: MicrosoftYaHei;
  letter-spacing: 1px;
  color: #464444;
  margin-top: 20px;
}
.verify {
  width: 94%;
  margin: auto;
}
.btn-size {
  height: 37px;
  background-color: #1d569d;
  border-radius: 2px;
  color: #fff;
  margin-left: 6%;
  font-family: MicrosoftYaHei;
  font-size: 17px;
  letter-spacing: 1px;
}
.note {
  margin-left: -5px;
}
.bang {
  margin-top: 60px;
  margin-left: 14px;
  height: 37px;
  background-color: #1d569d;
  color: #fff;
  font-family: MicrosoftYaHei;
  font-size: 16px;
  letter-spacing: 1px;
}
input::placeholder {
  text-indent: 16px;
  color: #c0c4cc;
}
.left-bise{
  margin-left:15px;
}
</style>